<template>
    <div style="margin-left: 50px;">
        <div id="chart1" class="chart"></div>
        <div id="chart2" class="chart"></div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                dataX1: [],
                dataValue1: [],
                dataX2: [],
                dataValue2: []
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
			
            getData() {
				var c = JSON.parse(sessionStorage.getItem("c"))
				for (var i = 0; i < c.length; i++) {
					this.dataX1.push(c[i].company)
					this.dataValue1.push(c[i].count)
				}
				var x = JSON.parse(sessionStorage.getItem("x"))
				for (var i = 0; i < x.length; i++) {
					this.dataX2.push(x[i].sys)
					this.dataValue2.push(x[i].count)
				}
                this.drawLineChart()
            },
			
            drawLineChart() {
                var chart1 = this.$echarts.init(document.getElementById('chart1'));
                chart1.setOption(this.getOption('公司-检修次数折线图', '公司和公司检修次数', '检修次数', this.dataX1, this.dataValue1));
                var chart2 = this.$echarts.init(document.getElementById('chart2'));
                chart2.setOption(this.getOption('检修系统-检修次数折线图', '检修系统和检修系统检修的次数', '检修次数', this.dataX2, this.dataValue2));
            },
            getOption(title, subtext, name, dataX, dataValue) {
                return {
                    color: ['#409EFF'],
                    title: {
                        text: title,//主标题
                        subtext: subtext//副标题
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: [name]//鼠标hover显示
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true,
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: dataX,
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [{
                        name: name,//鼠标hover显示
                        type: 'line',
                        stack: '总量',
                        data: dataValue,
                    }]
                };
            }
        },
    }
</script>

<style scoped>
    .chart {
        width: 100%;
        height: 400px;
    }
</style>